<!--  -->
<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-row :gutter="20">
        <el-col :span="6" :offset="3">
          <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="3" :offset="2">
          <el-button type="primary" @click="getLableList()">查找</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 列表 -->
    <el-timeline>
      <el-timeline-item :timestamp="item.createTime" placement="top" v-for="item in List" color="#409EFF" :key="item.id">
        <el-card>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-tag>姓名：{{ userInfo.memberName }}</el-tag>
            </el-col>
            <el-col :span="8">
              <el-tag>续费日期：{{ item.date }}</el-tag>
            </el-col>
            <el-col :span="4">
              <el-tag>续费金额：{{ item.money }}</el-tag>
            </el-col>
          </el-row>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParam.page"
      :page-sizes="[2, 4, 6, 10]" :page-size="pageParam.limit" layout="total, sizes, prev, pager, next, jumper"
      :total="pageParam.total">
    </el-pagination>
  </div>
</template>

<script>
import cookie from 'js-cookie'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      List: [],
      pageParam: {
        key: '', //查询条件
        page: 1, //当前页码
        limit: 4, //每页显示记录数
        total: 0, //总数
      },
      inputVisible: -1, //是否显示标签输入框
      inputValue: '', //新标签名称
      date: '',
      userInfo: {
        memberId: '',
        memberName: '',
        memberPhone: '',
        memberSex: '',
        memberAge: '',
        birthday: '',
        nenberDate: '',
        membertypes: {
          typeId: '',
          typeName: '',
          typeciShu: '',
          typeDay: '',
          typemoney: ''
        },
        memberStatic: '',
        memberbalance: '',
        memberxufei: '',
      },
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initUserInfo () {
      let userInfo = cookie.get('userInfo')
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo)
      }
    },
    //获取续费列表
    getLableList () {
      this.$http
        .get('/menber/font/congzhi/list', {
          memberId: this.userInfo.memberId,
          pageNumber: this.pageParam.page,
          pageSize: this.pageParam.limit,
          sdate: this.date == null ? '' : this.date[0],
          edate: this.date == null ? '' : this.date[1]
        })
        .then((res) => {
          console.log(res)
          this.List = res.data.records
          this.pageParam.page = Number(res.data.current)
          this.pageParam.limit = Number(res.data.size)
          this.pageParam.total = Number(res.data.total)
        })
    },
    //当前页码
    handleCurrentChange (val) {
      this.pageParam.page = val
      this.getLableList()
    },
    //每页显示数
    handleSizeChange (val) {
      this.pageParam.page = 1
      this.pageParam.limit = val
      this.getLableList()
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.initUserInfo();
    this.getLableList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
}
</script>
<style scoped>
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>